<template>
  <view class="u-page">
    <u--form labelPosition="left" :model="formData" ref="form1" labelWidth="80">
      <template v-for="(field, inx) in configs.fields">
        <!-- 单行文本输入 -->
        <template v-if="field.tagType == 'input-enter'">
          <u-form-item :label="field.label" borderBottom :ref="'ref_' + field.vmodel">
            <u--input v-model="formData[field.vmodel]" border="none"></u--input>
          </u-form-item>
        </template>

        <!-- 列表选择器 -->
        <template v-if="field.tagType == 'input-select'">
          <u-form-item :label="field.label" borderBottom :ref="'ref_' + field.vmodel" @click="isVisible(item.id, true)">
            <u--input v-model="formData[field.vmodel]" border="none" disabledColor="#ffffff" disabled></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
            <u-action-sheet
              :show="visibleState[item.id]"
              :actions="item._private.actions"
              :title="item._private.title"
              :description="item._private.tip"
              @close="isVisible(item.id, false)"
              @select="
                (e) => {
                  formData[item.data] = e.name
                }
              "
            >
            </u-action-sheet>
          </u-form-item>
        </template>
      </template>
    </u--form>

    <u-button text="submit" @click="submit"></u-button>
  </view>
</template>

<script>
export default {
  props: {
    tip: '',
    configs: { type: Object },
  },
  data() {
    return {
      formData: {},
      visibleState: {},
    }
  },
  created() {},
  mounted() {
    this.formData = { ...this.configs.formData }
  },
  methods: {
    submit() {
      console.log(this.formData)
    },
    isVisible(id, state) {
      this.visibleState[id] = state
      this.$forceUpdate()
    },
  },
}
</script>

<style lang="scss">
.u-page {
  padding: 0 16upx;
}
</style>
